import React from 'react';
import styles from './index.module.css';
import Logo from '../logo';
import { Input, Dropdown, Menu, Avatar, Badge } from 'antd';
import { CaretDownOutlined, BellOutlined, BulbOutlined, PlusOutlined } from '@ant-design/icons';
import Link from 'next/link'

const Header: React.FC = () => {

  const menu = (
    <Menu>
      <Menu.Item key="0">
        <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
          1st menu item
        </a>
      </Menu.Item>
      <Menu.Item key="1">
        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
          2nd menu item
        </a>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3" disabled>
        3rd menu item（disabled）
      </Menu.Item>
    </Menu>
  );
  return (
    <div className={styles.git_header_nav}>
      <div className={styles.container}>
        <div className={styles.header_left}>
          <div className={styles.gitosc_logo}>
            <Logo
              width={108}
              height={34}
            />
          </div>
          <Link href="/explore">
            <a className={styles.nav_item}>开源软件</a>
          </Link>
          <Link href="/enterprises">
            <a className={styles.nav_item}>
              企业版
            </a>
          </Link>
          <Link href="/education">
            <a className={styles.nav_item}>高校版</a>
          </Link>
          <a className={styles.nav_item} target="_blank" rel="noreferrer" href="https://gitee.cn/?utm_source=giteecom">私有云</a>
          <a className={styles.nav_item} target="_blank" rel="noreferrer" href="https://blog.gitee.com/?utm_sources=site_nav">博客</a>
          <Dropdown overlay={menu}>
            <a className={styles.nav_item} onClick={e => e.preventDefault()}>
              我的 <CaretDownOutlined />
            </a>
          </Dropdown>
        </div>
        <div className={styles.header_right}>
          <Input className={styles['search']} placeholder='搜开源' />
          <Dropdown overlay={menu}>
            <a className={styles['action-item']} onClick={e => e.preventDefault()}>
              <BellOutlined />
            </a>
          </Dropdown>
          <a className={styles['action-item']}>
            <BulbOutlined />
          </a>
          <Dropdown overlay={menu}>
            <a className={styles['action-item']} onClick={e => e.preventDefault()}>
              <PlusOutlined />
            </a>
          </Dropdown>
          <Dropdown overlay={menu}>
            <a className={styles['action-setting']} onClick={e => e.preventDefault()}>
              <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
              <CaretDownOutlined />
            </a>
          </Dropdown>
        </div>
      </div>
    </div>
  )
}

export default Header;
